<template>
	<view class="page-balance p12">
		<view class="module-card c255">
			<image src="../../static/image/bg-balance.png" style="width: 100%;" mode="widthFix"></image>
			<view class="card-content p16">
				<view class="u-flex u-f-jsb mt0">
					<view class="fz16 u-flex u-f-justify">
						我的邀请人：<u-avatar size="40" :src="userInfo.avatar"></u-avatar>{{userInfo.nickname}}
					</view>
				</view>
				
				<view class="u-flex u-f-jsb fz12 mt45" style="text-align: center;">
					<view>
						邀请客户总数
						<view class="fz18 mt3">{{userInfo.client}}</view>
					</view>
					<view>
						累计佣金总数(元)
						<view class="fz18 mt3">{{userInfo.totalRecharge}}</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<view class="bg-white p12 mt15" style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">
			<view class="u-flex u-f-jsb pt2 pb12">
				<span>已邀请客户</span>
				<span>注册时间</span>
			</view>
			<view class="p8 pt15 pb15 bt" style="font-size: 22rpx;" v-for="(item,index) in dataList" :key="index">
				
				<view class="u-flex u-f-jsb">
					<view class="c6 u-flex">
						<u-avatar size="80" :src="item.avatar" class="mr5"></u-avatar>
						
						<view class="pl5 fz12">
							{{item.nickname}}
							<view class="mt2">{{item.mobile}}</view>
						</view>
					</view>
					<view  style="min-width: 160rpx;text-align: right;">
						
						<view class="c9 fz12">{{item.status}}</view>
						<view class="c9 fz12 mt5">{{item.createTime.split(' ')[0]}}</view>
					</view>
				</view>
			</view>
			
			
			
		</view>
		<view class="mt15">
		
			<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
		</view>
		
	</view>
</template>

<script>
	import {
		getPlatform
	} from '@/config/util.js'
	export default {
		data() {
			return {
				current: 0,
				userInfo:{},
				dataList:[],
				loadStatus: 'more',
				scrollHeight: 300,
				page: 1,
			};
		},
		methods: {
			getData(){
				
						this.$api.getMyClient({page:1}, res => {
							if (res.code == 200) {
								this.dataList = res.data.list;
							}
						})
			},
			initData(){
				this.page=1
				this.dataList =[]
				this.getData()
				
			}
		},
		onLoad: function() {
				
				
					this.$api.getChannelHead({}, res => {
						if (res.code == 200) {
							this.userInfo = res.data;
						}
					})
				this.initData()
		}
	};
</script>

<style lang="scss">
	.btn {
		background: rgba(242, 70, 70, 0.1);
		color: #F24646;

		height: 86upx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.module-card {
		position: relative;

		.card-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}

	.btn-ti {
		color: #F7684C;
		padding: 14rpx 40rpx;
		background: #fff;
		box-shadow: 0px 8px 16px 0px #F7684C;
	}
	.module-tab{
		text-align: center;
		.item{
			padding: 20rpx;
			&.on{
				background: #F24646;
				color: #fff;
			}
		}
	}
</style>